<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
	div {
		border: 1px solid;
	}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="../src/tlayout.min.js"></script>
<script type="text/javascript">
	var layout;

	function OnResizeEvent() {
		tlt.doLayout(layout);
	}
	window.onload = function() {
		layout = tlt.initLayout();
		OnResizeEvent();
	}
</script>
</head>
<!-- 用overflow-y:scroll将滚动条固定下来，否则滚动条的动态显现将对不同布局（出现之前和之后的布局）产生不同的影响 -->
<body style='width:100%; height:100%; position:absolute; margin:0px; overflow-y:scroll;' onresize="OnResizeEvent();">
	<!-- test1 -->
	<p>水平左上对齐布局(Left,Top)</p>
	<div ui-type='h-layout' ui-gap='10' ui-align='lt' ui-width='95%' ui-height='20%' style='margin:5px;padding:3px;'>
		<div ui-width='20%' ui-height='50%'>20%,50%</div>
		<div ui-width='100' ui-height='20%'>100px,20%</div>
		<div ui-width='200' ui-height='100%'>200px,100%</div>
	</div>

	<p>水平左中对齐布局(Left,Center)</p>
	<div ui-type='h-layout' ui-gap='10' ui-align='lc' ui-width='95%' ui-height='20%' style='margin:5px;padding:3px;'>
		<div ui-width='20%' ui-height='50%'>20%,50%</div>
		<div ui-width='100' ui-height='20%'>100px,20%</div>
		<div ui-width='200' ui-height='100%'>200px,100%</div>
	</div>

	<p>水平左下对齐布局(Left,Bottom)</p>
	<div ui-type='h-layout' ui-gap='10' ui-align='lb' ui-width='95%' ui-height='20%' style='margin:5px;padding:3px;'>
		<div ui-width='20%' ui-height='50%'>20%,50%</div>
		<div ui-width='100' ui-height='20%'>100px,20%</div>
		<div ui-width='200' ui-height='100%'>200px,100%</div>
	</div>

	<p>水平右上对齐布局(Right,Top)</p>
	<div ui-type='h-layout' ui-align='rt' ui-gap='10' ui-width='95%' ui-height='20%' style='margin:5px;padding:3px;'>
		<div ui-width='20%' ui-height='50%'>20%,50%</div>
		<div ui-width='100' ui-height='20%'>100px,20%</div>
		<div ui-width='200' ui-height='100%'>200px,100%</div>
	</div>

	<p>水平右中对齐布局(Right,Center)</p>
	<div ui-type='h-layout' ui-align='rc' ui-gap='10' ui-width='95%' ui-height='20%' style='margin:5px;padding:3px;'>
		<div ui-width='20%' ui-height='50%'>20%,50%</div>
		<div ui-width='100' ui-height='20%'>100px,20%</div>
		<div ui-width='200' ui-height='100%'>200px,100%</div>
	</div>

	<p>水平右下对齐布局(Right,Bottom)</p>
	<div ui-type='h-layout' ui-align='rb' ui-gap='10' ui-width='95%' ui-height='20%' style='margin:5px;padding:3px;'>
		<div ui-width='20%' ui-height='50%'>20%,50%</div>
		<div ui-width='100' ui-height='20%'>100px,20%</div>
		<div ui-width='200' ui-height='100%'>200px,100%</div>
	</div>

	<p>水平居中、上对齐布局(Center,Top)</p>
	<div ui-type='h-layout' ui-align='ct' ui-gap='10' ui-width='95%' ui-height='20%' style='margin:5px;padding:3px;'>
		<div ui-width='20%' ui-height='50%'>20%,50%</div>
		<div ui-width='100' ui-height='20%'>100px,20%</div>
		<div ui-width='200' ui-height='100%'>200px,100%</div>
	</div>

	<p>水平居中、中对齐布局(Center,Center)</p>
	<div ui-type='h-layout' ui-align='cc' ui-gap='10' ui-width='95%' ui-height='20%' style='margin:5px;padding:3px;'>
		<div ui-width='20%' ui-height='50%'>20%,50%</div>
		<div ui-width='100' ui-height='20%'>100px,20%</div>
		<div ui-width='200' ui-height='100%'>200px,100%</div>
	</div>

	<p>水平居中、下对齐布局(Center,Bottom)</p>
	<div ui-type='h-layout' ui-align='cb' ui-gap='10' ui-width='95%' ui-height='20%' style='margin:5px;padding:3px;'>
		<div ui-width='20%' ui-height='50%'>20%,50%</div>
		<div ui-width='100' ui-height='20%'>100px,20%</div>
		<div ui-width='200' ui-height='100%'>200px,100%</div>
	</div>

	<p>水平填充、上对齐布局(Left,Top)</p>
	<div ui-type='h-layout' ui-align='lt' ui-gap='10' ui-width='95%' ui-height='20%' style='margin:5px;padding:3px;'>
		<div ui-width='20%' ui-height='50%'>20%,50%</div>
		<div ui-width='100' ui-height='20%'>100px,20%</div>
		<div ui-width='fill' ui-height='100%'>fill,100%</div>
		<div ui-width='fill' ui-height='100%'>fill,100%</div>
	</div>

	<p>水平填充、居中对齐布局(Left,Center)</p>
	<div ui-type='h-layout' ui-align='lc' ui-gap='10' ui-width='95%' ui-height='20%' style='margin:5px;padding:3px;'>
		<div ui-width='20%' ui-height='50%'>20%,50%</div>
		<div ui-width='100' ui-height='20%'>100px,20%</div>
		<div ui-width='fill' ui-height='100%'>fill,100%</div>
		<div ui-width='fill' ui-height='100%'>fill,100%</div>
	</div>

	<p>水平填充、下对齐布局(Left,Bottom)</p>
	<div ui-type='h-layout' ui-align='lb' ui-gap='10' ui-width='95%' ui-height='20%' style='margin:5px;padding:3px;'>
		<div ui-width='20%' ui-height='50%'>20%,50%</div>
		<div ui-width='100' ui-height='20%'>100px,20%</div>
		<div ui-width='fill' ui-height='100%'>fill,100%</div>
		<div ui-width='fill' ui-height='100%'>fill,100%</div>
	</div>

	<!--div>垂直上对齐布局</div-->
	<div ui-type='v-layout' ui-align='lt' ui-gap='10' ui-width='30%' ui-height='100%' style='margin:5px;padding:3px;float:left;'>
		<div ui-width='50%' ui-height='40%'>50%,40%</div>
		<div ui-width='100%' ui-height='20%'>100%,20%</div>
		<div ui-width='200' ui-height='10%'>200px,10%</div>
	</div>
	<div ui-type='v-layout' ui-align='ct' ui-gap='10' ui-width='30%' ui-height='100%' style='margin:5px;padding:3px;float:left;'>
		<div ui-width='50%' ui-height='40%'>50%,40%</div>
		<div ui-width='100%' ui-height='20%'>100%,20%</div>
		<div ui-width='200' ui-height='10%'>200px,10%</div>
	</div>
	<div ui-type='v-layout' ui-align='rt' ui-gap='10' ui-width='30%' ui-height='100%' style='margin:5px;padding:3px;float:left;'>
		<div ui-width='50%' ui-height='40%'>50%,40%</div>
		<div ui-width='100%' ui-height='20%'>100%,20%</div>
		<div ui-width='200' ui-height='10%'>200px,10%</div>
	</div>
	</div>

	<!--div>垂直居中对齐布局</div-->
	<div ui-type='v-layout' ui-align='lc' ui-gap='10' ui-width='30%' ui-height='100%' style='margin:5px;padding:3px;float:left;'>
		<div ui-width='50%' ui-height='40%'>50%,40%</div>
		<div ui-width='100%' ui-height='20%'>100%,20%</div>
		<div ui-width='200' ui-height='10%'>200px,10%</div>
	</div>
	<div ui-type='v-layout' ui-align='cc' ui-gap='10' ui-width='30%' ui-height='100%' style='margin:5px;padding:3px;float:left;'>
		<div ui-width='50%' ui-height='40%'>50%,40%</div>
		<div ui-width='100%' ui-height='20%'>100%,20%</div>
		<div ui-width='200' ui-height='10%'>200px,10%</div>
	</div>
	<div ui-type='v-layout' ui-align='rc' ui-gap='10' ui-width='30%' ui-height='100%' style='margin:5px;padding:3px;float:left;'>
		<div ui-width='50%' ui-height='40%'>50%,40%</div>
		<div ui-width='100%' ui-height='20%'>100%,20%</div>
		<div ui-width='200' ui-height='10%'>200px,10%</div>
	</div>

	<!--div>垂直下对齐布局</div-->
	<div ui-type='v-layout' ui-align='lb' ui-gap='10' ui-width='30%' ui-height='100%' style='margin:5px;padding:3px;float:left;'>
		<div ui-width='50%' ui-height='40%'>50%,40%</div>
		<div ui-width='100%' ui-height='20%'>100%,20%</div>
		<div ui-width='200' ui-height='10%'>200px,10%</div>
	</div>
	<div ui-type='v-layout' ui-align='cb' ui-gap='10' ui-width='30%' ui-height='100%' style='margin:5px;padding:3px;float:left;'>
		<div ui-width='50%' ui-height='40%'>50%,40%</div>
		<div ui-width='100%' ui-height='20%'>100%,20%</div>
		<div ui-width='200' ui-height='10%'>200px,10%</div>
	</div>
	<div ui-type='v-layout' ui-align='rb' ui-gap='10' ui-width='30%' ui-height='100%' style='margin:5px;padding:3px;float:left;'>
		<div ui-width='50%' ui-height='40%'>50%,40%</div>
		<div ui-width='100%' ui-height='20%'>100%,20%</div>
		<div ui-width='200' ui-height='10%'>200px,10%</div>
	</div>

	<!--div>垂直左对齐、填充布局</div-->
	<div ui-type='v-layout' ui-align='lt' ui-gap='10' ui-width='30%' ui-height='100%' style='margin:5px;padding:3px;float:left;'>
		<div ui-width='50%' ui-height='40%'>50%,40%</div>
		<div ui-width='100%' ui-height='20%'>100%,20%</div>
		<div ui-width='200' ui-height='10%'>200px,10%</div>
		<div ui-width='50%' ui-height='fill'>50%,fill</div>
	</div>
	<div ui-type='v-layout' ui-align='cb' ui-gap='10' ui-width='30%' ui-height='100%' style='margin:5px;padding:3px;float:left;'>
		<div ui-width='50%' ui-height='40%'>50%,40%</div>
		<div ui-width='100%' ui-height='20%'>100%,20%</div>
		<div ui-width='200' ui-height='10%'>200px,10%</div>
		<div ui-width='50%' ui-height='fill'>50%,fill</div>
	</div>
	<div ui-type='v-layout' ui-align='rb' ui-gap='10' ui-width='30%' ui-height='100%' style='margin:5px;padding:3px;float:left;'>
		<div ui-width='50%' ui-height='40%'>50%,40%</div>
		<div ui-width='100%' ui-height='20%'>100%,20%</div>
		<div ui-width='200' ui-height='10%'>200px,10%</div>
		<div ui-width='50%' ui-height='fill'>50%,fill</div>
	</div>

	<div ui-type='h-layout' ui-width='95%' ui-height='100%' style='margin:5px;float:left;background:aquamarine;'>
		<!-- 左边菜单栏 -->
		<div ui-type='v-layout' ui-width='150' ui-height='100%'>左边菜单栏</div>
		<!-- 右边工作区 -->
	  <div ui-type='v-layout' ui-align='lt' ui-width='fill' ui-height='100%' style='background:coral;'>
  		<!-- 上边工具栏 -->
			<div ui-type='h-layout' ui-align='lb' ui-width='100%' ui-height='80'>右侧工作区的上边，中间模拟一个表格</div>
			<!-- 中间数据展示区 -->
			<div id="table" ui-type='v-layout' ui-width='100%' ui-height='fill' style='background:burlywood;'>
				<div id="head" ui-width='100%' ui-height='40'>表格工具栏</div>
				<div id="body" ui-width='100%' ui-height='fill' style='background:blueviolet;'>
					表格的数据展现区
					<!-- 嵌套的独立布局 -->
					<div id='another' ui-type='h-layout' ui-align='lb' style='width:80%;height:80%;margin:2% auto;background:blue;'>
						模拟弹出的独立布局
						<div ui-type='h-layout' ui-gap='fill' ui-width='fill' ui-height='85%' style='padding:2px;background:chartreuse;'>
							水平等间距布局
							<div ui-width='50' ui-height='100%'></div>
							<div ui-width='50' ui-height='100%'></div>
							<div ui-width='50' ui-height='100%'></div>
							<div ui-width='50' ui-height='100%'></div>
							<div ui-width='50' ui-height='100%'></div>
							<div ui-width='50' ui-height='100%'></div>
						</div>
						<div ui-type='v-layout' ui-gap='fill' ui-width='fill' ui-height='85%' style='padding:2px;background:cadetblue;'>
							垂直等间距布局
							<div ui-width='100%' ui-height='30'></div>
							<div ui-width='100%' ui-height='30'></div>
							<div ui-width='100%' ui-height='30'></div>
							<div ui-width='100%' ui-height='30'></div>
							<div ui-width='100%' ui-height='30'></div>
							<div ui-width='100%' ui-height='30'></div>
						</div>
					</div>
				</div>
				<div id="foot" ui-width='100%' ui-height='40'>表格状态栏</div>
			</div>
			<!-- 下边状态栏 -->
			<div ui-type='h-layout' ui-width='100%' ui-height='80'>右侧工作区的下边</div>
	  </div>
	</div>
</body>
</html>
